<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    const Vnode=[
      {
        type:'div',
        porps:{
          id:'app',
          style:{color:'red'}
        },
        children:'2323232322'
      }
    ]
    function render(){
      // 每个组件的template都会被编译之后交给render函数执行生对应的虚拟DOM
      // 然后调用diff算法对前后生成的DOM进行对比标记出当前需要更新的DOM调用Patch方法
      patchNode(Vnode)
    }
    render()
    function patchNode({type,children,porps}){
      let element=document.createElement(type)
      if (props) {
        
      }
    }
    Vnode.forEach((node,index)=>{
      if (type ) {
        
      }
      patchNode(node)
    })
  </script>
</body>
</html>